<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="true"
    :keyboard="false"
    :forceRender="true"
    @cancel="handleCancel"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{$t('inPrint.cancel')}}</a-button>
    </template>
    <a-form :form="form">
      <a-row class="form-row" :gutter="24">
            
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.documentDate')">
                {{model.billTimeStr}}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.documentNo')">
                {{model.billNo}}
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('defaultTranslate.operator')">
                {{model.userName}}
              </a-form-item>
            </a-col>
             <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('manuManagement.associated')">
                {{ model.number }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item style="white-space:nowrap" :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.customer')">
                <a-input v-decorator="['id']" hidden/>
                {{model.organName}}
              </a-form-item>
            </a-col>
          </a-row>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :pagination="false"
            :columns="FactoryMoneyInColumns"
            :loading="loading"
            :dataSource="dataSource">
          </a-table>
          <a-row class="form-row" :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                {{model.remark}}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.paymentAccount')">
                {{model.accountName}}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.totalPayment')">
                {{model.totalPrice}}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.preferentialAmount')">
                {{model.discountMoney}}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('financialManagement.actualPayment')">
                {{model.changeAmount}}
              </a-form-item>
            </a-col>
          </a-row>
    </a-form>
  </j-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import { getAction } from '@/api/manage'
  import JUpload from '@/components/jeecg/JUpload'
  export default {
    name: 'checkDetail',
    components: {
      JUpload
    },
    data () {
      return {
        width: '1600px',
        visible: false,
        model: {},
        title: '',
        fileList: [],
        titile: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelStyle: {
          xs: { span: 24 },sm: { span: 8 }
        },
        wrapperStyle: {
          xs: { span: 24 },sm: { span: 16 }
        },
        form: this.$form.createForm(this),
        loading: false,
        dataSource: [],


        FactoryMoneyInColumns: [
          { title: this.$t('otherJS.receiptdate'), dataIndex: 'billTime', width: '10%',  },
          // {
          //   title: this.$t('setailManagement.warehouseName'), dataIndex: 'depotName', width: '7%'
          // },
          // { title: this.$t('purchasingManagement.invoicedate'), dataIndex: 'exchangeTime', width: '8%'},
          // {
          //   title: this.$t('purchasingManagement.invoicenumber'), dataIndex: 'invoiceNo', width: '8%'},
          { title: this.$t('purchasingManagement.invoicevalue'), dataIndex: 'totalPrice', width: '8%'},
          { title: this.$t('purchasingManagement.discountamount'), dataIndex: 'discountMoney' },
          { title: this.$t('purchasingManagement.Totalbankamount'), dataIndex: 'total' },
         
        ],


      }
    },
    created () {
      let realScreenWidth = window.screen.width
      this.width = realScreenWidth<1500?'1300px':'1550px'
    },
    methods: {
      show(billNo,type) {
        this.loading = true
        const param = {
          column: 'createTime',
          order: 'desc',
          field: 'id,,rowIndex,organName,billNo,billTimeStr,userName,totalPrice,changeAmount,remark,process,status,action',
          currentPage: 1,
          pageSize: 10,
          search: {
            billNo: billNo,
            type:type,
            roleType:"全部数据"
          }
        }
        this.visible = true;
        getAction('/accountHead/list',  param).then(res => {
          if (res) {
            let discount = 0
            let total = 0
            let fact = 0
            this.dataSource = res.data.rows.map(item => {
              discount += Number(item.discountMoney||0)
              total += Number(item.totalPrice||0)
              fact += Number(item.changeAmount||0)
              item.total = (item.totalPrice*100 - item.discountMoney*100) / 100
              return item
            })
            let data = this.dataSource[0]
            this.model = {
              accountName: data.accountName,
              billTimeStr: data.billTimeStr,
              billNo: data.billNo,
              userName: data.userName,
              number: data.number,
              organName: data.organName,
              totalPrice: total,
              changeAmount: fact,
              discountMoney: discount
            }
            // this.getFileList(record)
          }
        }).finally(() => {
          this.loading = false
        })

        //附件下载
        // this.fileList = record.fileName
        

      
      },
      getFileList (record) {
        let params = {
          id: record.id
        }
        if(record.id === localStorage.getItem('fileListId')) {
          this.fileList = localStorage.getItem('fileList')
          return;
        }
        getAction('/attachment/getAttachmentListById', params).then(res => {
          if (res.code === 200) {
            let arr = res.data
            arr.forEach(item => {
              item.uid = item.id
              item.url = ''
              item.flag = '1'
              item.status = 'done'
              item.name = item.fileName
            })
            this.fileList = res.data
            localStorage.setItem('fileList', JSON.stringify(this.fileList))
            localStorage.setItem('fileListId', JSON.stringify(record.id))
          }
        })
    },
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>